<template>
  <div class="alone-outBox f14">
    <div class="alone-topBox mb16">
      <div class="flex flex-warp flex_bt">
        <div class="flex flex-warp" style="align-items: center">
          <div class="mb16 mr16">
            <span>所属行业：</span>
            <el-select
              v-model="searchObj.industry"
              placeholder="请选择"
              class="width200"
              clearable
            >
              <el-option
                v-for="item in tagList"
                :key="item.tagname + item.tagid"
                :label="item.tagname"
                :value="item.tagname"
              />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>单位类型：</span>
            <el-select
              v-model="searchObj.unit"
              placeholder="请选择"
              class="width200"
              clearable
              @change="changeunit"
            >
              <el-option
                v-for="item in unitTypeData"
                :key="item.name + '类型'"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>职位：</span>
            <el-select
              v-model="searchObj.duty"
              placeholder="请选择"
              class="width200"
              clearable
            >
              <el-option
                v-for="item in positionTypeData"
                :key="item.name + '职位'"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </div>

          <div class="mb20">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">筛选</el-button>
          </div>
        </div>
        <div></div>
      </div>
    </div>

    <div class="tableBox">
      <div class="flex_bt">
        <span>提示：该视频累计有{{ total }}个授权共享用户</span>
        <span>
          <span style="color: #409eff; padding-right: 5px"
            >已勾选{{ sendEmailData.length }}个用户</span
          >
          <el-button :disabled="$route.query.type&&$route.query.type!=2&&$route.query.type!=5" type="primary" @click="sendEmail()">发送至邮箱</el-button>
        </span>
      </div>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="DataTable"
        style="width: 100%"
        max-height="620"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="100" align="left">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          min-width="150"
          align="left"
        >
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180" align="left">
        </el-table-column>
        <el-table-column
          prop="industry"
          label="所属行业"
          min-width="120"
          align="left"
        >
        </el-table-column>

        <el-table-column
          prop="company"
          min-width="300"
          label="单位名称"
          align="left"
        />
        <el-table-column
          prop="unit"
          label="单位类型"
          min-width="160"
          align="left"
        />

        <el-table-column prop="duty" label="职位" min-width="120" align="left"></el-table-column>
        <el-table-column prop="toback" label="是否同意联系本人（是/否）" min-width="120" align="left"></el-table-column>
        <el-table-column
          prop="createdate"
          label="同意授权时间"
          min-width="150"
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="downDate"
          label="最近一次下载时间"
          min-width="150"
          align="left"
        >
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          align="center"
          min-width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="checkInfo(scope.row)"
              >查看完整信息</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="alignRight">
        <Pagination
          :total="total"
          :page="searchObj.current"
          :limit="searchObj.size"
          @pagination="paginations"
        />
      </div>
    </div>
    <!-- 发送邮箱 -->
    <el-dialog title="发送邮箱" :visible.sync="emailDia" width="550px">
      <div class="mt15">
        <span class="label_email">请填写邮箱地址，接收名单</span>
        <span class="label_ms">多个邮箱，请用英文“逗号”进行分隔</span>
      </div>
      <div>
        <el-input
          v-model="companyData.imLinkemail"
          class="email_input"
          placeholder="请填写正确的邮箱地址"
        ></el-input>
      </div>
      <div style="color: red;line-height: 19px;font-size: 13px;">请确保您输入的电子邮件地址是正确的，<br>
           因邮箱地址输入错误可能产生的侵权责任，由贵司自行承担！</div>
       
      <!-- <div>
        <a href="http://" target="_blank" rel="noopener noreferrer"
          >《xxxxxxxxx用户名单》</a
        >
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="emailDia = false">取 消</el-button>
        <el-button type="primary" @click="sendEmailDia()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog
      title="完整授权用户信息"
      :visible.sync="userDialog"
      width="550px"
    >
      <el-row style="margin-top: 15px;">
        <el-col :span="12">
          <div class="lh22">姓名：<span class="colr_ms">{{userData.name}}</span></div></el-col
        >
        <el-col :span="12"
          ><div class="lh22">手机号：<span class="colr_ms">{{userData.mobile}}</span></div></el-col
        >
      </el-row>
      <el-row class="mb20">
        <el-col :span="12"
          ><div class="lh22">邮箱：<span class="colr_ms">{{userData.email}}</span></div></el-col
        >
        <el-col :span="12"
          ><div class="lh22">职位：<span class="colr_ms">{{userData.duty}}</span></div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12"
          ><div class="lh22">单位类型：<span class="colr_ms">{{userData.unit}}</span></div></el-col
        >
        <el-col :span="12"
          ><div class="lh22">所属行业：<span class="colr_ms">{{userData.industry}}</span></div></el-col
        >
      </el-row>
      <el-row class="mb20">
        <el-col :span="24"
          ><div class="lh22">单位名称：<span class="colr_ms">{{userData.company}}</span></div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="24"
          ><div class="lh22">同意授权时间：<span class="colr_ms">{{userData.createdate}}</span></div></el-col
        >
      </el-row>
      <el-row class="mb20">
        <el-col :span="24"
          ><div class="lh22">
            最近一次下载时间：<span class="colr_ms">{{userData.downDate}}</span>
          </div></el-col
        >
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userDialog=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import Pagination from "@/components/Pagination/index.vue";
import api from "@/api/index";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      searchObj: {
        industry: "",
        unit: "",
        size: 10,
        current: 1,
        duty: "",
      },
      total: 0,
      loading: false,
      emailDia: false,
      userDialog: false,
      DataTable: [],
      tagList: [],
      unitTypeData: [],
      positionTypeData: [],
      sendEmailData: [],
      videoData: {},
      userData: {
        name: "",
        mobile: "",
        email: "",
        duty: "",
        company: "",
        unit: "",
        createdate: "",
        downDate: "",
      },
      companyData: {
        imLinkemail: "",
      },
    };
  },
  mounted() {
    this.SearchList();
    this.selectTagList();
    this.selectUnitType();
    this.videoInfoById();
    // this.selectCompany()
  },
  methods: {
    //查看详情
    checkInfo(val) {
      let form = {
        id: val.id,
      };
      api.video.selectAuthorizedById(form).then((res) => {
        this.userData = res.data;
        this.userDialog = true;
      });
    },
    //发送邮箱
    sendEmailDia() {
      let ids = [];
      this.sendEmailData.forEach((item) => {
        ids.push(item.id);
      });
      let form = {
        company: this.companyData.webinarCompanyName,
        email: this.companyData.imLinkemail,
        userIdList: ids,
        videoId: this.videoData.videoid,
        videoName: this.videoData.title,
      };
      api.video.sendEmailByUserIdList(form).then((res) => {
        if (res.code == 200) {
          this.$message({ type: "success", message: "发送成功！" });
          this.emailDia = false;
          this.SearchList();
        }
      });
    },
    selectCompany() {
      api.video.selectCompany().then((res) => {
        this.companyData = res.data;
        this.emailDia = true;
      });
    },
    videoInfoById() {
      let form = {
        videoId: this.$route.query.id,
      };
      api.video.videoInfoById(form).then((res) => {
        this.videoData = res.data;
      });
    },
    sendEmail() {
      if (this.sendEmailData.length == 0) {
        this.$message({ type: "warning", message: "请勾选用户！" });
      } else {
        this.selectCompany();
      }
    },
    changeunit(val) {
      let obj = {};
      obj = this.unitTypeData.find((item) => {
        return item.name === val;
      });
      let form = {
        parentid: obj.id,
        typename: "ZWLX",
      };
      api.video.selectUnitType(form).then((res) => {
        this.positionTypeData = res.data;
      });
    },
    //获取单位类型
    selectUnitType() {
      let form = {
        parentid: 0,
        typename: "DWLX",
      };
      api.video.selectUnitType(form).then((res) => {
        this.unitTypeData = res.data;
      });
    },
    //获取行业
    selectTagList() {
      api.video.selectTagList().then((res) => {
        this.tagList = res.data;
      });
    },
    // 重置
    React() {
      this.searchObj = {
        industry: "",
        unit: "",
        size: 10,
        current: 1,
        duty: "",
      };
      this.SearchList();
    },
    handleSelectionChange(val) {
      this.sendEmailData = val;
    },
    // 查询
    SearchListBt() {
      this.searchObj.size = 10;
      this.searchObj.current = 1;
      this.SearchList();
    },
    SearchList() {
      this.loading = true;
      this.searchObj.videoId = this.$route.query.id;
      api.video.videoAuthorizedByVideoId(this.searchObj).then((res) => {
        this.loading = false;
        this.DataTable = res.data.records;
        this.DataTable.forEach((item) => {
          if (item.sampleName === "" || item.sampleName == null) {
            item.sampleName = "--";
          }
          switch (item.lyState) {
            case 0:
              item.lyState = "待审核";
              break;
            case 1:
              item.lyState = "已录用";
              break;
            case 2:
              item.lyState = "已退回";
              break;
          }
          switch (item.toback) {
            case 0:
              item.toback = "否";
              break;
            case 1:
              item.toback = "是";
              break;
          }
        });
        this.total = res.data.total;
      });
    },
    // 分页
    paginations(val) {
      this.searchObj.current = val.page;
      this.searchObj.size = val.limit;
      this.SearchList();
    },
  },
};
</script>
  <style lang="scss" scoped>
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}
.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
.flex_bt {
  @include flex(row, center, space-between);
  margin-bottom: 12px;
}
.label_email {
  font-size: $f16;
  color: #333;
  padding-right: 5px;
}
.label_ms {
  font-size: $f12;
  color: $c7e;
}
.email_input {
  margin: 15px 0;
}
.colr_ms {
  color: #333;
  padding-left: 15px;
}
.mb20{
    margin-bottom: 20px;
}
.lh22{
    line-height: 25px;
}
</style>
  